{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block scripts %}
    <script type="text/javascript">
        function improve(id, flag) {
            $.post("/updateState", {complaint_id: id, improved: flag});
            location.reload('#complain');
        }
    </script>
    {{ super() }}
{%- endblock scripts %}
{% block page_content %}


    <div>

        {% if current_user.is_authenticated %}
            <div class="col-md-12">
                <label class="col-md-4">Username:{{ current_user.name }}</label>
                <label class="col-md-6">Student ID：{{ current_user.id }}</label>

            </div>

            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#want" data-toggle="tab">Want to complain</a></li>
                <li><a href="#complain" data-toggle="tab">Complaint information</a></li>
                <li><a href="#complained" data-toggle="tab">Be Complained information</a></li>
                <li><a href="#revisited" data-toggle="tab">Return visit of complaint</a></li>
            </ul>
            <div class="tab-content">
                <div id="want" class="tab-pane active">
                    <div>
                        {{ wtf.quick_form(form) }}
                    </div>
                </div>
                <div id="complain" class="tab-pane">
                    <br>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Content</th>
                            <th>State</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for complain in complain_list %}
                            <tr>
                                {% for info in complain %}
                                    <td>{{ info }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                </div>
                <div class="tab-pane fade" id="complained">
                    <br>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Content</th>
                            <th>State</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for complained in complained_list %}
                            <tr>
                                {% for info1 in complained %}
                                    <td>{{ info1 }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="revisited">
                    <br>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Content</th>
                            <th>State</th>
                            <th>Date</th>
                            <th>Improved？</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for complained in revisit_list %}
                            <tr>

                                <td>{{ complained[0] }}</td>
                                <td>{{ complained[1] }}</td>
                                <td>{{ complained[2] }}</td>

                                <td>
                                    <button type="button" class="btn btn-default btn-sm"
                                            onclick="improve({{ complained[3] }},1)">
                                        <span class="glyphicon glyphicon-ok"></span>
                                    </button>
                                    <button type="button" class="btn btn-default btn-sm"
                                            onclick="improve({{ complained[3] }},0)">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}